<template>
	<view class="wrap">
		<view class="tabs">
		    <!-- Tab标题 -->
		    <ul class="tabs-ul">
			  <li class="tabs-ul-li" :class="{active:item.id==activeTab}" v-for="(item, index) in tabs" :key="index" @click="changeTab(item.id)">{{ item.title }}</li>
			  </ul>
		</view>
		<view class="art-box">
			<block v-for="(item,index) in 12" :key="index">
				<view class="art-item u-flex">
					<image src="../../static/1.jpg" class="art-img"></image>
					<view class="art-right-box u-flex u-flex-column u-flex-between">
						<view class="art-top u-flex u-flex-between">
							<view class="u-flex">
								<text class="nickname">依然</text>
								<image src="../../static/love/unreal.png" class="authentication-icon"
									v-if="Number(index+1)%2==0"></image>
								<image src="../../static/love/real.png" class="authentication-icon" v-else></image>
							</view>
							<u-icon name="close" color="#000"></u-icon>
						</view>
						<view class="tips">诚寻靠谱男结婚，非诚勿扰</view>
						<view class="art-bottom u-flex u-flex-between">
							<text>32岁</text>
							<text>九龙坡石桥铺</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
	
	
</template>

<script>
export default {
	onShow() {
		this.getCollectList();
	},
	onLoad(options) {
	},
	data() {
		return {
			curNow:0,
			activeTab: 1, // 当前活跃的选项卡ID
			tabs: [
				{ id: '1', title: '我的收藏' },
				{ id: '2', title: '收藏我的' },
			],
			clooectList:[],
			testTxt:'',
			avatar: "https://cdn.uviewui.com/uview/album/1.jpg",
		}
	},
	methods: {
		getCollectList() {
			this.testTxt = 1
		},
		changeTab(id) {
			this.activeTab = id;
			if( id == 1 ) { // 我收藏的
				this.getCollectList();
			}
			if( id == 2 ) { // 收藏我的
				this.testTxt = 2
			}
		}
	}	
}	
</script>

<style lang="less">
.art-box {
		padding: 30upx;

		.art-item {
			margin-bottom: 30upx;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20upx;

			.art-img {
				width: 160upx;
				height: 160upx;
				border-radius: 20upx;
				overflow: hidden;
			}

			.art-right-box {
				flex: 1;
				margin-left: 20upx;
				height: 160upx;

				.art-top {
					.nickname {
						font-weight: bold;
					}

					.authentication-icon {
						width: 100upx;
						height: 40upx;
						margin-left: 10upx;
					}
				}

				.tips {
					font-size: 30upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.art-bottom {
					font-size: 28upx;
					color: darkgray;
				}
			}
		}
	}
.active {
	background-color: #e16b8c;
	color: #fff;
}
.tabs {
	display: flex;
	flex-direction: column;
	padding: 20upx 0;
	padding-bottom: 0;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #fff;
	.tabs-ul {
		display: flex;
		flex-direction: row;
		list-style: none;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		margin: 0;
		padding: 0;
		.tabs-ul-li {
			width:50%;
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding-bottom: 100upx;
}
</style>